<template>
  <div class="muge-plane">
    <line-title title="天空の梦" />
    <div class="sky">
      <div class="clouds_one"></div>
      <div class="clouds_two"></div>
      <div class="clouds_three"></div>
    </div>
    <div class="plane">
      <div class="wings">
        <div class="fan">
          <div class="fan-wings">
            <div class="fan-a"></div>
            <div class="fan-b"></div>
            <div class="fan-c"></div>
            <div class="fan-d"></div>
          </div>
        </div>
        <div class="cat">
          <div class="legs"></div>
        </div>
      </div>
      <div class="wheel">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</template>
<script langt="ts" setup>
  import LineTitle from '@comp/LineTitle/LineTitle.vue'
</script>
<style lang="scss" scoped>
  .muge-plane {
    margin: $about-plane-margin;
    position: relative;
    height: $about-plane-height;
    overflow: hidden;

    *,
    ::after,
    ::before {
      box-sizing: border-box;
    }

    .sky {
      height: $about-plane-height;
      background: #007fd5;
      position: position;
      overflow: hidden;
      -webkit-animation: sky_background 50s ease-out infinite;
      -moz-animation: sky_background 50s ease-out infinite;
      -o-animation: sky_background 50s ease-out infinite;
      animation: sky_background 50s ease-out infinite;
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .fan,
    .wheel .left,
    .wheel .right,
    .wings::before,
    .wings::after,
    .wheel .left::before,
    .wheel .right::after {
      background: #e1f1ff;
    }

    .line-b::before,
    .line-b::after,
    .line-d::before,
    .line-d::after,
    .line-d::after,
    .wings::before,
    .wings::after,
    .cat .legs::before,
    .cat .legs::after,
    .wheel .left::before,
    .wheel .right::after,
    .fan .fan-wings .fan-a::before,
    .fan .fan-wings .fan-b::before,
    .fan .fan-wings .fan-c::before,
    .fan .fan-wings .fan-d::before {
      content: '';
      position: absolute;
    }

    .plane {
      z-index: 5;
      width: 250px;
      height: 110px;
      position: relative;
      margin: 0 auto;
      top: -265px;
      -webkit-animation: plane-move 10s infinite;
      animation: plane-move 10s infinite;
      -webkit-animation-fill-mode: backwards;
      animation-fill-mode: backwards;

      .wings {
        height: 52px;
        position: relative;
      }
    }

    .plane .wings::before,
    .plane .wings::after {
      height: 5px;
      width: 100%;
      border-radius: 3px;
      // margin-left: -250rpx;//飞机翅膀 不用时删除
    }

    .plane .wings::before {
      top: 0;
    }

    .plane .wings::after {
      bottom: 0;
      height: 4px;
    }

    .plane .fan {
      left: 50%;
      z-index: 1;
      width: 50px;
      height: 50px;
      bottom: -25px;
      border-radius: 50%;
      margin-left: -25px;
      position: absolute;
    }

    .plane .fan .fan-wings {
      top: 50%;
      left: 50%;
      width: 110px;
      height: 110px;
      overflow: hidden;
      margin-top: -55px;
      position: absolute;
      margin-left: -55px;
      border-radius: 50%;
    }

    .plane .fan .fan-wings .fan-a,
    .plane .fan .fan-wings .fan-b,
    .plane .fan .fan-wings .fan-c,
    .plane .fan .fan-wings .fan-d {
      width: inherit;
      height: inherit;
      position: absolute;
      -webkit-animation: engine-start 1s infinite;
      animation: engine-start 1s infinite;
    }

    .plane .fan .fan-wings .fan-a {
      -webkit-animation-duration: 0.2s;
      animation-duration: 0.2s;
    }

    .plane .fan .fan-wings .fan-b {
      -webkit-animation-duration: 0.4s;
      animation-duration: 0.4s;
    }

    .plane .fan .fan-wings .fan-c {
      -webkit-animation-duration: 0.4s;
      animation-duration: 0.4s;
    }

    .plane .fan .fan-wings .fan-d {
      -webkit-animation-duration: 0.2s;
      animation-duration: 0.2s;
    }

    .plane .fan .fan-wings .fan-a::before,
    .plane .fan .fan-wings .fan-b::before,
    .plane .fan .fan-wings .fan-c::before,
    .plane .fan .fan-wings .fan-d::before {
      top: 50%;
      left: 50%;
      height: 55px;
      width: 110px;
      margin-top: -55px;
      margin-left: -55px;
      border-radius: 110px 110px 0 0;
      background: rgba(255, 255, 255, 0.4);
    }

    .plane .fan .fan-wings .fan-a::before {
      right: 0;
      width: 55px;
      height: 110px;
      border-radius: 110px 0 0 110px;
    }

    .plane .fan .fan-wings .fan-b::before {
      right: 0;
      height: 55px;
      width: 110px;
      border-radius: 110px 110px 0 0;
    }

    .plane .fan .fan-wings .fan-c::before {
      left: 100%;
      width: 55px;
      height: 110px;
      border-radius: 0 110px 110px 0;
    }

    .plane .fan .fan-wings .fan-d::before {
      top: 100%;
      width: 110px;
      height: 55px;
      border-radius: 0 0 110px 110px;
    }

    .plane .cat {
      bottom: 0;
      z-index: 2;
      width: 22px;
      right: 35px;
      height: 20px;
      position: absolute;
      background: #1c1c1c;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      border-radius: 15px 15px 0 0;
      -webkit-animation: cat-move 10s infinite;
      animation: cat-move 10s infinite;
    }

    .plane .cat::before {
      content: '';
      width: 0;
      height: 0;
      top: -5px;
      left: 0;
      position: inherit;
      border: 11px solid #1c1c1c;
      border-top: 10px solid transparent;
    }

    .plane .cat .legs {
      bottom: 0;
      height: 20px;
      width: inherit;
      position: inherit;
    }

    .plane .cat .legs::before,
    .plane .cat .legs::after {
      top: 12px;
      width: 5px;
      height: 17px;
      background: #1c1c1c;
      border-bottom: 4px solid #f6f7f7;
    }

    .plane .cat .legs::before {
      left: -5px;
      border-radius: 6px 0 2px 2px;
    }

    .plane .cat .legs::after {
      right: -5px;
      border-radius: 0 6px 2px 2px;
    }

    .plane .wheel {
      height: 78px;
    }

    .plane .wheel .left,
    .plane .wheel .right {
      bottom: 0;
      width: 10px;
      height: 20px;
      border-radius: 5px;
      position: absolute;
    }

    .plane .wheel .left {
      left: 60px;
    }

    .plane .wheel .right {
      right: 60px;
    }

    .plane .wheel .left::before,
    .plane .wheel .right::after {
      top: -15px;
      width: 78px;
      height: 2px;
    }

    .plane .wheel .left::before {
      left: -5px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    .plane .wheel .right::after {
      right: -5px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }

  @-webkit-keyframes engine-start {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }

  @keyframes engine-start {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }

  @-webkit-keyframes plane-move {
    10% {
      -webkit-transform: rotate(0deg) translateY(0);
      transform: rotate(0deg) translateY(0);
    }

    20% {
      -webkit-transform: rotate(-4deg) translateY(10px);
      transform: rotate(-4deg) translateY(10px);
    }

    30% {
      -webkit-transform: rotate(0deg) translateY(0);
      transform: rotate(0deg) translateY(0);
    }

    40% {
      -webkit-transform: rotate(0deg) translateY(-4px);
      transform: rotate(0deg) translateY(-4px);
    }

    50% {
      -webkit-transform: rotate(0deg) translateY(0);
      transform: rotate(0deg) translateY(0);
    }

    90% {
      -webkit-transform: rotate(8deg) translateY(0);
      transform: rotate(8deg) translateY(0);
    }

    100% {
      -webkit-transform: rotate(-360deg) translateY(5px);
      transform: rotate(-360deg) translateY(5px);
    }
  }

  @keyframes plane-move {
    10% {
      -webkit-transform: rotate(0deg) translateY(0);
      transform: rotate(0deg) translateY(0);
    }

    20% {
      -webkit-transform: rotate(-4deg) translateY(10px);
      transform: rotate(-4deg) translateY(10px);
    }

    30% {
      -webkit-transform: rotate(0deg) translateY(0);
      transform: rotate(0deg) translateY(0);
    }

    40% {
      -webkit-transform: rotate(0deg) translateY(-4px);
      transform: rotate(0deg) translateY(-4px);
    }

    50% {
      -webkit-transform: rotate(0deg) translateY(0);
      transform: rotate(0deg) translateY(0);
    }

    90% {
      -webkit-transform: rotate(8deg) translateY(0);
      transform: rotate(8deg) translateY(0);
    }

    100% {
      -webkit-transform: rotate(-360deg) translateY(5px);
      transform: rotate(-360deg) translateY(5px);
    }
  }

  @-webkit-keyframes cat-move {
    10% {
      height: 20px;
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    20% {
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    30% {
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    40% {
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    50% {
      height: 20px;
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    90% {
      -webkit-transform: translate(20px, 0) rotate(0);
      transform: translate(20px, 0) rotate(0);
    }

    95% {
      height: 30px;
      -webkit-transform: translate(0, -20px) rotate(360deg);
      transform: translate(0, -20px) rotate(360deg);
    }

    100% {
      height: 25px;
      -webkit-transform: translate(0, -15px) rotate(0);
      transform: translate(0, -15px) rotate(0);
    }
  }

  @keyframes cat-move {
    10% {
      height: 20px;
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    20% {
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    30% {
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    40% {
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    50% {
      height: 20px;
      -webkit-transform: translate(0) rotate(0);
      transform: translate(0) rotate(0);
    }

    90% {
      -webkit-transform: translate(20px, 0) rotate(0);
      transform: translate(20px, 0) rotate(0);
    }

    95% {
      height: 30px;
      -webkit-transform: translate(0, -20px) rotate(360deg);
      transform: translate(0, -20px) rotate(360deg);
    }

    100% {
      height: 25px;
      -webkit-transform: translate(0, -15px) rotate(0);
      transform: translate(0, -15px) rotate(0);
    }
  }

  @-webkit-keyframes cloud {
    25% {
      -webkit-transform: translate(0);
      transform: translate(0);
    }

    50% {
      -webkit-transform: translate(0, -10px);
      transform: translate(0, -10px);
    }

    75% {
      -webkit-transform: translate(15px, 0);
      transform: translate(15px, 0);
    }
  }

  @keyframes cloud {
    25% {
      -webkit-transform: translate(0);
      transform: translate(0);
    }

    50% {
      -webkit-transform: translate(0, -10px);
      transform: translate(0, -10px);
    }

    75% {
      -webkit-transform: translate(15px, 0);
      transform: translate(15px, 0);
    }
  }

  .clouds_one {
    background: url('../../assets/img/plane/cloud_one.png');
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_one 50s linear infinite;
    -moz-animation: cloud_one 50s linear infinite;
    -o-animation: cloud_one 50s linear infinite;
    animation: cloud_one 50s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .clouds_two {
    background: url('../../assets/img/plane/cloud_two.png');
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_two 75s linear infinite;
    -moz-animation: cloud_two 75s linear infinite;
    -o-animation: cloud_two 75s linear infinite;
    animation: cloud_two 75s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .clouds_three {
    background: url('../../assets/img/plane/cloud_three.png');
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_three 100s linear infinite;
    -moz-animation: cloud_three 100s linear infinite;
    -o-animation: cloud_three 100s linear infinite;
    animation: cloud_three 100s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  @-webkit-keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5;
    }

    50% {
      background: #000;
      color: #a3d9ff;
    }

    100% {
      background: #007fd5;
      color: #007fd5;
    }
  }

  @-moz-keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5;
    }

    50% {
      background: #000;
      color: #a3d9ff;
    }

    100% {
      background: #007fd5;
      color: #007fd5;
    }
  }

  @keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5;
    }

    50% {
      background: #000;
      color: #a3d9ff;
    }

    100% {
      background: #007fd5;
      color: #007fd5;
    }
  }

  @-webkit-keyframes cloud_one {
    0% {
      left: 0;
    }

    100% {
      left: -200%;
    }
  }

  @-moz-keyframes cloud_one {
    0% {
      left: 0;
    }

    100% {
      left: -200%;
    }
  }

  @keyframes cloud_one {
    0% {
      left: 0;
    }

    100% {
      left: -200%;
    }
  }

  @-webkit-keyframes cloud_two {
    0% {
      left: 0;
    }

    100% {
      left: -200%;
    }
  }

  @-moz-keyframes cloud_two {
    0% {
      left: 0;
    }

    100% {
      left: -200%;
    }
  }

  @keyframes cloud_two {
    0% {
      left: 0;
    }

    100% {
      left: -200%;
    }
  }

  @-webkit-keyframes cloud_three {
    0% {
      left: 0;
    }

    100% {
      left: -200%;
    }
  }

  @-moz-keyframes cloud_three {
    0% {
      left: 0;
    }

    100% {
      left: -200%;
    }
  }

  @keyframes cloud_three {
    0% {
      left: 0;
    }

    100% {
      left: -200%;
    }
  }
</style>
